Tuyến đường chặn (Interception Routes) của Next.js: Làm chủ các mẫu Modal và Overlay

Next.js, một framework React phổ biến, cung cấp các tính năng mạnh mẽ để xây dựng các ứng dụng web hiệu suất cao và có khả năng mở rộng. Một trong những tính năng đó là Interception Routes (Tuyến đường chặn), cung cấp một cách tinh vi để xử lý các kịch bản định tuyến phức tạp, đặc biệt là khi triển khai các mẫu modal và overlay. Hướng dẫn toàn diện này sẽ khám phá cách tận dụng Interception Routes để tạo ra trải nghiệm người dùng liền mạch và hấp dẫn.

Interception Routes là gì?

Interception Routes cho phép bạn chặn một tuyến đường và hiển thị một giao diện người dùng khác mà không thay đổi URL trên trình duyệt. Hãy coi nó như một lối đi tắt tạm thời giúp làm phong phú thêm trải nghiệm người dùng. Điều này đặc biệt hữu ích cho:

• Modal: Hiển thị nội dung trong một cửa sổ modal mà không cần điều hướng sang trang mới.
• Overlay: Hiển thị thông tin hoặc các điều khiển bổ sung chồng lên trên nội dung hiện có.
• Thư viện ảnh: Tạo trải nghiệm điều hướng mượt mà, giống như trang trong một thư viện ảnh.
• Luồng giới thiệu người dùng mới (Onboarding): Hướng dẫn người dùng qua một quy trình nhiều bước mà không cần tải lại toàn bộ trang.

Tại sao nên sử dụng Interception Routes cho Modal và Overlay?

Các phương pháp truyền thống để xử lý modal và overlay thường liên quan đến việc quản lý trạng thái trong một component, điều này có thể trở nên phức tạp và dẫn đến các vấn đề về hiệu suất. Interception Routes mang lại một số lợi thế:

• Cải thiện SEO: Nội dung hiển thị trong modal hoặc overlay vẫn có thể được các công cụ tìm kiếm truy cập vì nó được liên kết với một tuyến đường cụ thể.
• URL có thể chia sẻ: Người dùng có thể chia sẻ một liên kết trực tiếp đến nội dung của modal hoặc overlay.
• Lịch sử trình duyệt: Các nút tiến và lùi của trình duyệt hoạt động như mong đợi, cho phép người dùng điều hướng qua lịch sử của modal.
• Quản lý trạng thái đơn giản hóa: Giảm sự phức tạp trong việc quản lý trạng thái hiển thị của modal, dẫn đến mã nguồn sạch hơn và dễ bảo trì hơn.
• Nâng cao hiệu suất: Tránh các lần render lại không cần thiết bằng cách chỉ cập nhật nội dung của modal.

Thiết lập Interception Routes trong Next.js

Hãy minh họa cách triển khai Interception Routes bằng một ví dụ thực tế: tạo một modal để hiển thị chi tiết sản phẩm trong một ứng dụng thương mại điện tử.

Cấu trúc dự án

Đầu tiên, hãy xác định cấu trúc thư mục. Giả sử chúng ta có một thư mục `products` nơi mỗi sản phẩm có một ID duy nhất.

app/
  products/
    [id]/
      page.js       // Trang chi tiết sản phẩm
    @modal/
      [id]/
        page.js   // Nội dung modal cho chi tiết sản phẩm
    default.js  // Bố cục cho thư mục products
  page.js           // Trang chủ

Giải thích

• `app/products/[id]/page.js`: Đây là trang chi tiết sản phẩm chính.
• `app/products/@modal/[id]/page.js`: Đây là định nghĩa của Interception Route sẽ hiển thị nội dung modal. Lưu ý quy ước `@modal` – điều này rất quan trọng để Next.js nhận ra tuyến đường chặn.
• `app/products/default.js`: Đây là bố cục cho thư mục `products`. Cần phải bao bọc tuyến đường `@modal` trong bố cục này.
• `app/page.js`: Trang chủ, nơi sẽ chứa các liên kết đến sản phẩm của chúng ta.

Triển khai mã nguồn

1. Trang chủ (app/page.js)

Trang này hiển thị danh sách các sản phẩm, mỗi sản phẩm có một liên kết mở chi tiết sản phẩm trong một modal.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Laptop' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablet' },
];

export default function Home() {
 return (
 

 
Product List
 

 {products.map((product) => (
 

 
 {product.name}
 
 
 ))}
 
 
 );
}

2. Trang chi tiết sản phẩm (app/products/[id]/page.js)

Trang này hiển thị chi tiết đầy đủ của sản phẩm. Trong một ứng dụng thực tế, trang này sẽ lấy dữ liệu từ một API hoặc cơ sở dữ liệu. Quan trọng là, nó cung cấp một liên kết quay lại danh sách sản phẩm ban đầu.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Product Details
 
Product ID: {id}
 
This is the full product details page.
 Back to Product List
 
 );
}

3. Nội dung Modal (app/products/@modal/[id]/page.js)

Đây là phần quan trọng – Interception Route. Nó hiển thị nội dung modal sử dụng cùng một ID sản phẩm. Lưu ý hook `useParams` để truy cập ID.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Product Modal
 
Product ID: {id}
 
This content is rendered within a modal!
  history.back()}>Close Modal
 
 
 );
}

Lưu ý: Chỉ thị `'use client';` là cần thiết cho các tương tác phía máy khách, đặc biệt khi sử dụng `useParams`.

Tạo kiểu (modal.module.css): Một module CSS đơn giản được sử dụng để tạo kiểu cơ bản cho modal. Điều này rất quan trọng để định vị modal một cách chính xác.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Đảm bảo nó nằm trên cùng */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Bố cục (app/products/default.js)

Bố cục này bao bọc tuyến đường `@modal`, đảm bảo nó được hiển thị trong ngữ cảnh của sản phẩm.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 
 );
}

Cách thức hoạt động

1. Khi người dùng nhấp vào một liên kết sản phẩm trên trang chủ (ví dụ: `/products/1`), Next.js nhận ra đây là một tuyến đường trong thư mục `products`.
2. Vì có tuyến đường chặn `@modal`, Next.js sẽ kiểm tra xem có tuyến đường phù hợp nào dưới `@modal` không.
3. Nếu tìm thấy một kết quả khớp (ví dụ: `/products/@modal/1`), Next.js sẽ hiển thị nội dung từ `app/products/@modal/[id]/page.js` ngay trong trang hiện tại. URL trên trình duyệt vẫn là `/products/1`.
4. Các kiểu `modalOverlay` sẽ định vị modal nằm trên nội dung bên dưới.
5. Nhấp vào "Close Modal" sử dụng `history.back()` để quay lại, thực chất là đóng modal và trở về trạng thái trước đó.

Các kỹ thuật Interception Route nâng cao

1. Xử lý nút Quay lại (Back)

Một khía cạnh quan trọng của việc triển khai modal là đảm bảo hành vi đúng đắn với nút quay lại của trình duyệt. Khi người dùng mở một modal và sau đó nhấp vào nút quay lại, lý tưởng nhất là họ sẽ đóng modal và trở về ngữ cảnh trước đó, chứ không phải điều hướng ra khỏi ứng dụng.

Phương thức `history.back()` được sử dụng trong ví dụ đã đạt được hiệu ứng này bằng cách quay lại một bước trong lịch sử của trình duyệt. Tuy nhiên, đối với các kịch bản phức tạp hơn, bạn có thể cần triển khai một trình xử lý nút quay lại tùy chỉnh để xem xét trạng thái định tuyến hiện tại.

2. Nội dung Modal động

Trong các ứng dụng thực tế, nội dung modal có thể sẽ là động, được lấy từ một API hoặc cơ sở dữ liệu dựa trên ID sản phẩm. Bạn có thể sử dụng API `fetch` hoặc một thư viện lấy dữ liệu như SWR hoặc React Query trong component modal để truy xuất dữ liệu cần thiết.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Thay thế bằng endpoint API của bạn
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Loading...
;
 }

 return (
 

 
{product.name}
 
{product.description}
 {/* ... other product details ... */}
  history.back()}>Close Modal
 
 );
}

3. Modal lồng nhau

Interception Routes có thể được lồng vào nhau để tạo ra các luồng công việc modal phức tạp. Ví dụ, một người dùng có thể mở một modal chi tiết sản phẩm và sau đó nhấp vào một nút để mở một modal sản phẩm liên quan. Điều này có thể được thực hiện bằng cách tạo các tuyến đường chặn bổ sung trong thư mục `@modal`.

4. Xử lý lỗi 404

Hãy xem xét kịch bản một người dùng điều hướng đến URL của modal với ID sản phẩm không hợp lệ (ví dụ: `/products/@modal/nonexistent`). Bạn nên triển khai xử lý lỗi phù hợp để hiển thị một trang 404 thân thiện với người dùng hoặc chuyển hướng người dùng đến một trang sản phẩm hợp lệ.

// app/products/@modal/[id]/page.js

// ... (rest of the component)

 if (!product) {
 return 
Product not found.
; // Hoặc chuyển hướng đến trang 404
 }

// ... (rest of the component)

5. Các mẫu Overlay

Mặc dù các ví dụ đã tập trung vào modal, Interception Routes cũng có thể được sử dụng cho các overlay. Thay vì căn giữa nội dung, overlay có thể xuất hiện dưới dạng một thanh bên (sidebar) hoặc một bảng điều khiển trượt vào từ một phía của màn hình. Kiểu CSS sẽ khác, nhưng logic định tuyến vẫn giữ nguyên.

Ví dụ và trường hợp sử dụng trong thực tế

• Thương mại điện tử: Hiển thị chi tiết sản phẩm, tóm tắt giỏ hàng, hoặc quy trình thanh toán trong một modal hoặc overlay.
• Mạng xã hội: Hiển thị xem trước hình ảnh, phần bình luận, hoặc hồ sơ người dùng trong một modal.
• Quản lý tài liệu: Hiển thị xem trước tài liệu, công cụ chỉnh sửa, hoặc lịch sử phiên bản trong một overlay.
• Ứng dụng bản đồ: Hiển thị chi tiết vị trí, các điểm ưa thích, hoặc thông tin tuyến đường trong một overlay.
• Hệ thống CRM: Hiển thị chi tiết liên hệ, nhật ký hoạt động, hoặc các cơ hội bán hàng trong một modal.

Ví dụ: Nền tảng thương mại điện tử quốc tế Hãy tưởng tượng một trang web thương mại điện tử toàn cầu. Khi người dùng nhấp vào một sản phẩm, chi tiết sẽ mở ra trong một modal. URL thay đổi thành `/products/[product_id]`, cho phép liên kết trực tiếp và mang lại lợi ích về SEO. Nếu người dùng chuyển đổi ngôn ngữ trên trang modal (ví dụ: từ tiếng Anh sang tiếng Tây Ban Nha), chi tiết sản phẩm sẽ được lấy theo ngôn ngữ đã chọn và nội dung modal sẽ cập nhật một cách liền mạch. Hơn nữa, trang web có thể phát hiện vị trí của người dùng (với sự đồng ý) và hiển thị thông tin vận chuyển phù hợp với khu vực của họ ngay trong modal.

Các thực hành tốt nhất khi sử dụng Interception Routes

• Giữ nội dung Modal ngắn gọn: Tránh làm quá tải modal với quá nhiều thông tin. Tập trung vào việc trình bày các chi tiết cần thiết.
• Cung cấp điều hướng rõ ràng: Đảm bảo người dùng có thể dễ dàng đóng modal và quay lại ngữ cảnh trước đó.
• Tối ưu hóa cho thiết bị di động: Thiết kế bố cục modal sao cho đáp ứng (responsive) và thân thiện với người dùng trên các màn hình nhỏ hơn.
• Kiểm tra kỹ lưỡng: Kiểm tra hành vi của modal trên các trình duyệt và thiết bị khác nhau để đảm bảo trải nghiệm nhất quán.
• Cân nhắc khả năng truy cập: Triển khai các thuộc tính ARIA phù hợp và điều hướng bằng bàn phím để làm cho modal có thể truy cập được bởi người dùng khuyết tật.

Các giải pháp thay thế cho Interception Routes

Mặc dù Interception Routes cung cấp một giải pháp mạnh mẽ cho các mẫu modal và overlay, các phương pháp tiếp cận khác cũng có thể được xem xét:

• Quản lý trạng thái truyền thống: Sử dụng hook `useState` của React hoặc một thư viện quản lý trạng thái như Redux hoặc Zustand để kiểm soát khả năng hiển thị của modal. Điều này đơn giản hơn cho các triển khai modal rất cơ bản, nhưng trở nên khó quản lý hơn ở quy mô lớn.
• Thư viện Modal của bên thứ ba: Tận dụng các component modal được xây dựng sẵn từ các thư viện như React Modal hoặc Material UI. Chúng có thể cung cấp một giải pháp nhanh chóng nhưng có thể hạn chế các tùy chọn tùy chỉnh.
• Thư viện định tuyến phía máy khách: Các thư viện như React Router có thể được sử dụng để quản lý định tuyến phía máy khách và khả năng hiển thị của modal.

Kết luận

Interception Routes của Next.js cung cấp một cách mạnh mẽ và tinh tế để triển khai các mẫu modal và overlay trong ứng dụng web của bạn. Bằng cách tận dụng tính năng mạnh mẽ này, bạn có thể tạo ra các trải nghiệm liền mạch, thân thiện với SEO và thân thiện với người dùng. Mặc dù có các phương pháp tiếp cận thay thế, Interception Routes cung cấp một sự kết hợp độc đáo các lợi ích, khiến chúng trở thành một công cụ có giá trị trong kho vũ khí của bất kỳ nhà phát triển Next.js nào.

Tài liệu tham khảo bổ sung

• Tài liệu về Interception Routes của Next.js
• Tài liệu về React